<template>
    <li>
        <input type="checkbox" v-model="isChecked" @change="handleCheck" />
        <span :class="{ delStyle: isChecked }">{{ todo }}</span>
        <button @click="deleteTodo">删除</button>
    </li>
</template>
<script setup>
import { ref } from "vue";
const props = defineProps({
    todo: {
        type: String,
        required: true,
    },
    checked: {
        type: Boolean,
        default: false,
    },
});

const emits = defineEmits(["delete", "handleCheck"]);
const deleteTodo = () => {
    emits("delete");
};

const isChecked = ref(props.checked);
const handleCheck = () => {
    emits("handleCheck", isChecked.value);
};
</script>
<style scoped>
.delStyle {
    color: red;
    text-decoration: line-through;
}
</style>
